<template>
  <div class="mange">
    <div class="title">
      联邦社区管理
    </div>
    <div class="table">
      <my-table
        :show-index="false"
        :table-data="tableData"
        :column-data="columnData"
        :operate-btn="operateBtn"
        :show-operate="true"
        @handleClick="handleClick"
      />
    </div>
    <my-dialog
      :dialog-title="'联邦社区概况'"
      :dialog-visible="openDialog"
      dialog-width="1000px"
      @closeDialog="visibleChange"
    >
      <template slot="content">
        <div class="list">
          <div class="item">
            <div class="item-title">
              社区标识 ID:
            </div>
            <div class="item value">
              {{ selectRow.id }}
            </div>
          </div>
          <div class="item">
            <div class="item-title">
              训练数据集:
            </div>
            <div class="item value">
              {{ selectRow.dbname }}
            </div>
          </div>
          <div class="item">
            <div class="item-title">
              主导医疗机构:
            </div>
            <div class="item value">
              {{ selectRow.mainJG }}
            </div>
          </div>
          <div class="item">
            <div class="item-title">
              隐私保护等级:
            </div>
            <div class="item value">
              {{ selectRow.level }}
            </div>
          </div>
          <div class="item">
            <div class="item-title">
              联邦社区成员数量:
            </div>
            <div class="item value">
              {{ selectRow.memberNumber }}
            </div>
          </div>
          <div class="item">
            <div class="item-title">
              联邦社区成员单位:
            </div>
            <div class="item value">
              {{ selectRow.memberName }}
            </div>
          </div>
        </div>
      </template>
    </my-dialog>
  </div>
</template>
<script>
import { getList } from '@/api/institution'
export default {
  data() {
    return {
      tableData: [],
      openDialog: false,
      selectRow: {}
    }
  },
  computed: {
    columnData() {
      return [
        { prop: 'id', label: '社区标识', width: '70', align: 'center' },
        { prop: 'dbname', label: '训练数据库', align: 'center' },
        { prop: 'mainJG', label: '主导医疗机构', align: 'center' },
        { prop: 'memberNumber', label: '社区成员个数', align: 'center' }
      ]
    },
    // 分页时的表格数据
    currentTableData() {
      let tempTableData = []
      tempTableData = this.userList.slice(
        (this.pageSize.current - 1) * this.pageSize.size,
        this.pageSize.current * this.pageSize.size
      )
      return tempTableData
    },
    // 右侧操作按钮
    operateBtn() {
      return [
        {
          label: '',
          type: 'text',
          size: 'mini',
          icon: 'el-icon-search',
          event: 'view'
        }
      ]
    },
    // 分页组件传参
    paginationData() {
      return {
        current: this.pageSize.current,
        pageSize: this.pageSize.size,
        size: [10, 20, 30, 40],
        total: this.currentTableData.length
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    // 获取表格数据
    getTableData() {
      getList().then(res => {
        this.tableData = res.data
      })
    },
    // 点击表格右侧操作按钮
    handleClick(row, event) {
      console.log(row, event)
      if (event === 'view') {
        this.selectRow = row
        this.openDialog = true
      }
    },

    // 弹窗
    visibleChange(data) {
      if (data === false) {
        this.selectRow = {}
      }
      this.openDialog = data
    }
  }
}
</script>
<style>
    .mange{
        display: flex;
        flex-direction: column;
        height: calc(100vh - 50px);
        padding: 15px 20px;
        background-color: #f7f8f9;
    }
    .table{
        flex: 1;
        margin-top: 20px;
        background-color: #fff;
    }
    .list{
        width: 100%;
    }
    .item{
        display: flex;
        height: 50px;
        align-items: center;
    }
    .item-title{
        display: flex;
        align-items: center;
        width: 220px;
        height: 100%;
        padding-left: 10px;
        text-align: right;
        margin-right: 20px;
        text-align: left;
        font-size: 13px;
        font-weight: bold;
        color: #333333;
    }
    .item-value{
        flex: 1;
        font-size: 13px;
    }

</style>
